<template>
  <div class="app-container  bg-gray">
    <el-row class="box-1">
      <el-col :span="24">
        <el-card>
          <div class="header">
            <div>
              <el-input v-model="searchTerms.input" placeholder="请输入内容" class="search-input" @change="search" />
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="search">搜索</el-button>
              <div class="flex-1" />
              <column-controller :check-items="th" class="controller" @change="columnCheck" />
            </div>
          </div>
          <el-table :data="tableData" border>
            <el-table-column prop="id" label="ID" min-width="80" header-align="center" align="center" sortable />
            <el-table-column v-if="th[0].check" label="略缩图" min-width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.avatar==''?defaultAvatar:scope.row.avatar" alt="" style="width:86px;height:86px;">
              </template>
            </el-table-column>
            <el-table-column v-if="th[1].check" prop="name" label="商品名称" min-width="200" header-align="center" align="center" />
            <el-table-column v-if="th[2].check" prop="type" label="商品类型" min-width="120" header-align="center" align="center" />
            <el-table-column v-if="th[3].check" prop="price" label="价格" min-width="100" header-align="center" align="center" />
            <el-table-column v-if="th[4].check" prop="sales" label="销量" min-width="100" header-align="center" align="center" />
            <el-table-column v-if="th[5].check" prop="weight" label="置顶权重" min-width="120" header-align="center" align="center" sortable/>
            <el-table-column label="状态" min-width="80" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <div @click="setState(scope.row)">
                  <el-tag :type="scope.row.status==0?'danger':'success'">{{ scope.row.status==0?'冻结':'正常' }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="200" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDelete" />
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" class="pagination" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ColumnController } from '../components'
import defaultAvatar from '../../images/default_avatar.png'

export default {
  components: { ColumnController },
  data() {
    return {
      defaultAvatar: defaultAvatar,

      searchTerms: {
        input: ''
      },

      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,

      tableData: [{
        id: 190,
        avatar: '',
        name: '分销商城小程序',
        type: '小程序',
        price: '1680.00',
        weight: '99',
        state: 1
      }, {
        id: 190,
        avatar: '',
        name: '分销商城小程序',
        type: '小程序',
        price: '1680.00',
        weight: '99',
        state: 1
      }, {
        id: 190,
        avatar: '',
        name: '分销商城小程序',
        type: '小程序',
        price: '1680.00',
        weight: '99',
        state: 1
      }],
      th: [{
        name: '略缩图',
        check: true
      }, {
        name: '商品名称',
        check: true
      }, {
        name: '商品类型',
        check: true
      }, {
        name: '价格',
        check: true
      }, {
        name: '销量',
        check: true
      }, {
        name: '置顶权重',
        check: true
      }]
    }
  },
  watch: {},
  created() {

  },
  methods: {
    columnCheck(index) {
      this.th[index].check = !this.th[index].check
      // console.log(index)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    search() {
      // console.log(this.searchValue)
    },
    toDelete() {
      this.$confirm('此操作将删除该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    setState(row) {
      // console.log(row)
      row.state = !row.state
    },
    toModify(title) {
      this.isShow = false
      this.$router.push({
        path: '/product/productList/modify',
        query: { title: title }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding-bottom: 15px;
      flex-wrap: wrap;

      > div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
        width: 100%;
      }
      .search-input {
        width: 240px;
        margin-top: 10px;
      }
      .el-button {
        margin-top: 10px;
      }
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .controller {
        margin-top: 10px;
      }
    }
  }
  .el-tag {
    cursor: pointer;
  }
</style>
